<div [formGroup]="itemFormGroup">
    <!--标准输入框-->
    <input [formControlName]="name" (ngModelChange)="onChange($event)" [type]="option.type" [id]="name" [name]="name" class="form-control" [placeholder]="placeholder" [(ngModel)]="value" *ngIf="',text,url,email,password,'.indexOf(','+option.type+',')!=-1">
    <!--数字输入框-->
    <input [formControlName]="name" [min]="option.min" [max]="option.max" (ngModelChange)="onChange($event)" [type]="option.type" [id]="name" [name]="name" class="form-control" [placeholder]="placeholder" [(ngModel)]="value" *ngIf="',number,'.indexOf(','+option.type+',')!=-1">
    <!--切换开关-->
    <p-inputSwitch [formControlName]="name" (onChange)="onChange($event.checked)" [(ngModel)]="value" *ngIf="',switch,'.indexOf(','+option.type+',')!=-1"></p-inputSwitch>
    <!--文件上传-->
    <div class="input-inline input-large" *ngIf="',file,'.indexOf(','+option.type+',')!=-1">
        <input (ngModelChange)="onChange($event)" [formControlName]="name" type="hidden" [id]="name" [name]="name" [(ngModel)]="value" />
        <div class="btn-group">
            <file-upload class="btn blue" (fileSelect)="fileSelect($event)" [fileType]="'image/*'" [fileTypeErr]="'上传文件类型不正确'" [fileMaxSize]="'500KB'" [fileMaxSizeErr]="'文件太大了'"> <i class="icon-picture"></i> 文件上传</file-upload>
            <button type="button" class="btn green" name="btnPreview" (click)="imgPreview.toggle($event)" *ngIf="value&&option.preview"> <i class="icon-eye"></i> 预览 </button>
            <button type="button" class="btn btn-danger" name="btnClear" *ngIf="value" (click)="onChange('')"> <i class="icon-trash"></i> 清除 </button>
            <p-overlayPanel #imgPreview appendTo="body">
                <img [src]="value" />
            </p-overlayPanel>
        </div>
    </div>
    <!--日期控件-->
    <div class="input-group" *ngIf="',date,'.indexOf(','+option.type+',')!=-1">
        <input (ngModelChange)="onChange($event)" [formControlName]="name" class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
        <div class="input-group-addon" (click)="d.toggle()">
            <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;" />
        </div>
    </div>
    <!--<div class="input-group input-medium" *ngIf="',date,'.indexOf(','+option.type+',')!=-1">
    <input type="text" id="{{gsItem.Varname}}" name="{{gsItem.Varname}}" class="form-control" uib-datepicker-popup="{{GgcmsOptions.datePicker.format}}" ng-model="gsItem.Value" is-open="option.opened" current-text="{{GgcmsOptions.datePicker.currentText}}"
        clear-text="{{GgcmsOptions.datePicker.clearText}}" close-text="{{GgcmsOptions.datePicker.closeText}}" datepicker-options="datePickerOptions" />
    <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="GgcmsOptions.datePicker.open($event,option)">
                <i class="glyphicon glyphicon-calendar"></i>
            </button>
        </span>
</div>-->
    <!--<div uib-timepicker ng-model="gsItem.Value" hour-step="GgcmsOptions.timePicker.hourStep" minute-step="GgcmsOptions.timePicker.minuteStep" show-meridian="ismeridian" *ngIf="',time,'.indexOf(','+option.type+',')!=-1"></div>-->
    <!--<div class="row" *ngIf="',datetime,'.indexOf(','+option.type+',')!=-1">
    <div class="col-sm-6">
        <div class="input-group datePadding">
            <input type="text" id="{{gsItem.Varname}}" name="{{gsItem.Varname}}" class="form-control" uib-datepicker-popup="{{GgcmsOptions.datePicker.format}}" current-text="{{GgcmsOptions.datePicker.currentText}}" is-open="option.opened" clear-text="{{GgcmsOptions.datePicker.clearText}}"
                close-text="{{GgcmsOptions.datePicker.closeText}}" ng-model="gsItem.Value" datepicker-options="datePickerOptions" />
            <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="GgcmsOptions.datePicker.open($event,option)">
                        <i class="glyphicon glyphicon-calendar"></i>
                    </button>
                </span>
        </div>
    </div>
    <div class="col-sm-6">
        <div uib-timepicker ng-model="gsItem.Value" hour-step="GgcmsOptions.timePicker.hourStep" minute-step="GgcmsOptions.timePicker.minuteStep" show-meridian="ismeridian"></div>
    </div>
</div>-->
    <!--简单的文本框-->
    <textarea (ngModelChange)="onChange($event)" [formControlName]="name" [id]="name" [name]="name" class="form-control" [placeholder]="placeholder" [(ngModel)]="value" *ngIf="',textarea,'.indexOf(','+option.type+',')!=-1"></textarea>
    <!--富文本框-->
    <tiny-editor [elementId]="name" (valueChange)="onChange($event)" [(value)]="value" [options]="richeditor" *ngIf="',richeditor,'.indexOf(','+option.type+',')!=-1"> </tiny-editor>
    <!--简单的富文本框-->
    <tiny-editor [elementId]="name" (valueChange)="onChange($event)" [(value)]="value" [options]="simpleditor" *ngIf="',simpleditor,'.indexOf(','+option.type+',')!=-1"> </tiny-editor>
    <!--单选select-->
    <select (ngModelChange)="onChange($event)" [formControlName]="name" class="form-control input-inline" [id]="name" [name]="name" [(ngModel)]="value" *ngIf="',select,'.indexOf(','+option.type+',')!=-1&&!option.multiple&&option.datasource=='sysdict'">
        <option value="" selected>---请选择---</option> 
        <option [value]="item.Value" *ngFor="let item of dataSource" >{{item.Title}}</option>
    </select>
    <!--风格-->
    <select (ngModelChange)="onChange($event)" [formControlName]="name" class="form-control input-inline" [id]="name" [name]="name" [(ngModel)]="value" *ngIf="',select,'.indexOf(','+option.type+',')!=-1&&!option.multiple&&option.datasource=='style'">
        <option value="" selected>---请选择---</option> 
        <option [value]="item.Folder" *ngFor="let item of dataSource" >{{item.StyleName}}</option>
    </select>
    <!--模板-->
    <select (ngModelChange)="onChange($event)" [formControlName]="name" class="form-control input-inline" [id]="name" [name]="name" [(ngModel)]="value" *ngIf="',select,'.indexOf(','+option.type+',')!=-1&&!option.multiple&&option.datasource=='template'">
        <option value="" selected>---请选择---</option> 
        <option [value]="item.name" *ngFor="let item of dataSource" >{{item.name}}</option>
    </select>
    <!--多选select-->
    <p-multiSelect (ngModelChange)="onChange($event)" [id]="name" [name]="name" [options]="dataSource" [(ngModel)]="value" *ngIf="',select,'.indexOf(','+option.type+',')!=-1&&option.multiple"></p-multiSelect>
    <!--复选框-->
    <div class="checkbox-list" *ngIf="',checkbox,'.indexOf(','+option.type+',')!=-1">
        <label class="checkbox-inline" *ngFor="let item of dataSource"> 
        <input type="checkbox" [name]="name" [checked]="true"> {{item.Ename}}
    </label>
    </div>
    <!--单选框-->
    <div class="radio-list" *ngIf="',radio,'.indexOf(','+option.type+',')!=-1">
        <label class="radio-inline" *ngFor="let item of dataSource"> 
        <input type="radio" (ngModelChange)="onChange($event)" [(ngModel)]="value" [name]="name"> {{item.Ename}}
    </label>
    </div>
    <!--提示信息-->
    <div class="alert alert-info" *ngIf="option.helpMessage!=''"> {{option.helpMessage}} </div>
    <!--出错信息-->
    <div *ngIf="!(itemFormGroup?.valid || itemFormGroup?.pristine)&&option.message!=''" class="alert alert-danger">
        {{option.message}}
    </div>
    <div class="alert alert-danger" *ngIf="itemFormGroup?.hasError('required',[name])&&!itemFormGroup?.pristine&&option.requiredMessage!=''"> {{option.requiredMessage}} </div>
    <div class="alert alert-danger" *ngIf="itemFormGroup?.hasError('minlength',[name])&&!itemFormGroup?.pristine&&option.minLengthMessage!=''"> {{option.minLengthMessage}} </div>
    <div class="alert alert-danger" *ngIf="itemFormGroup?.hasError('maxlength',[name])&&!itemFormGroup?.pristine&&option.maxLengthMessage!=''"> {{option.maxLengthMessage}} </div>
    <div class="alert alert-danger" *ngIf="itemFormGroup?.hasError('min',[name])&&!itemFormGroup?.pristine&&option.minMessage!=''"> {{option.minMessage}} </div>
    <div class="alert alert-danger" *ngIf="itemFormGroup?.hasError('max',[name])&&!itemFormGroup?.pristine&&option.maxMessage!=''"> {{option.maxMessage}} </div>
    <div class="alert alert-danger" *ngIf="itemFormGroup?.hasError('pattern',[name])&&!itemFormGroup?.pristine&&option.patternMessage!=''"> {{option.patternMessage}} </div>
    <div class="alert alert-danger" *ngIf="itemFormGroup?.hasError('minDate',[name])&&!itemFormGroup?.pristine&&option.minDateMessage!=''"> {{option.minDateMessage}} </div>
    <div class="alert alert-danger" *ngIf="itemFormGroup?.hasError('maxDate',[name])&&!itemFormGroup?.pristine&&option.maxDateMessage!=''"> {{option.maxDateMessage}} </div>
    <div class="alert alert-danger" *ngIf="itemFormGroup?.hasError('maxSize',[name])&&!itemFormGroup?.pristine&&option.fileSizenMessage!=''"> {{option.fileSizenMessage}} </div>
    <div class="alert alert-danger" *ngIf="itemFormGroup?.hasError('minDate',[name])&&!itemFormGroup?.pristine&&option.minDateMessage!=''"> {{option.minDateMessage}} </div>
</div>